<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{margin:0;padding:0;}
        .side-nav{
            width:50px;
            position:fixed;
            left:0;
            top:20%;
            background:chocolate;
        }
        .side-nav span{
            display:block;
            width:50px;
            height:50px;
            text-align: center;
            line-height: 50px;
          
        }
        span:active{
            border:4px solid #FFF;
        }
        .floor{
            width：100%;
            height:400px;
            margin-bottom: 20px;
            background: pink;
        }
       
    </style>
</head>
<body>
    <div class="side-nav">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
    </div>
    
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor "></div>
    <div class="floor"></div>
    <div class="floor"></div>
    <div class="floor "></div>
    <div class="floor"></div>
   
   <script>
    //   做一个数组,把相同的颜色放到导航栏和对应的文本栏
       var color= ['red','orange','yellow','green','blue','cyan','purple'];
       var floorLength=[]
       for(let i=0;i<color.length;i++){
        var span=document.getElementsByTagName("span")
        // 给给个导航栏添加对应颜色
        span[i].style.background=color[i]
        var floor=document.getElementsByClassName("floor")[i]
        //给每个文本栏添加对应颜色
        floor.style.background=color[i]
        floorLength[i]=floor.offsetTop;
        // 给每个导航栏添加对应单击事件
        span[i].onclick=function(){
            length=document.documentElement.scrollTop||document.body.scrollTop;
            //设置实际滚动距离
            var dist=length-floorLength[i]
            console.log(i)
            var steps=50;
            var dur=500;
            step=dist/steps;
            var interval=dur/steps;
            var timer=setInterval(()=>{
                    window.scrollBy(0,-step)
                    steps--;
                    if(steps==0){
                        clearInterval(timer)
                        step=50
                    }
            },interval)
        }
      
       }
      
   </script>
</body>
</html>